<template>
  <main-card title="模型库" :main-body-style-obj="{ paddingBottom: 0 }" :show-screen-space="false">
    <switch-tabs class="pb-12 pt-4" :selected-tab="selectedTab" :tabs="tabList" @switch-tab="selectSwitchTable" />
    <div class="model-base-content">
      <router-view />
    </div>
  </main-card>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue'
  import { useRoute, useRouter } from 'vue-router'

  import switchTabs from '@/components/SwitchTabs/index.vue'

  const route = useRoute()
  let router = useRouter()

  let tabList = ref([
    {
      name: '公开模型',
      key: '/model-base/list/public-model'
    },
    {
      name: '我的收藏',
      key: '/model-base/list/collect-model'
    }
  ])
  let selectedTab = ref<string>(route.path)
  onMounted(() => {
    goPath(selectedTab.value)
  })

  const selectSwitchTable = (index: string) => {
    selectedTab.value = index
    goPath(index)
  }

  const goPath = (index: string) => {
    tabList.value.filter(item => {
      if (item.key === index) {
        router.push(item.key)
      }
    })
  }
</script>
<style lang="less" scoped>
  .page {
    width: 100%;

    .header-title {
      padding: 24px 0;
      color: @text01;

      .font20b();
    }

    .model-base-content {
      display: flex;
      justify-content: center;
      padding: 0;
      width: 100%;
    }

    .switch {
      display: flex;
      justify-content: center;
      padding: 12px 0;
    }
  }

  .title-flex {
    display: flex;
    justify-content: center;
  }
</style>
